<template>
    <div>
        <!-- 表格区域 -->
        <div class="table-body">
            <!-- 左上角按钮 -->
            <div class="table-right-top">
                <el-button v-auth="'generate-repayment-code'" v-if="!repaid" icon="el-icon-plus" type="primary" @click="visible = true">{{ $i18n.t('GENERATE_REPAYMENT_CODE') }}</el-button>
            </div>
            <repayment-record-table :data="data" :loading="loading"></repayment-record-table>
        </div>
        <!-- 生成还款码 -->
        <generate-repayment-code-form
            :model.sync="model"
            :visible.sync="visible"
            :repay-config="repay_channel"
            @on-submit="onSubmit"
            :message-content="repaymentMessage"
            :errors="repaymentErrors"
            :error-message="repaymentErrorMessage"
            :loading="loading"
        >
        </generate-repayment-code-form>
    </div>
</template>

<script>
    import { getLoanedDetail, handleLoanedTask } from '@/api/loaned'
    import RepaymentRecordTable from '@/components/Table/RepaymentRecord'
    import GenerateRepaymentCodeForm from '@/components/Form/GenerateRepaymentCodeForm'

    export default {
        name: 'LoanedRepaymentRecord',
        components: { GenerateRepaymentCodeForm, RepaymentRecordTable },
        watch: {
            query () {
                this.fetch()
            },
            model: {
                handler (value) {
                    if (value.repay_channel !== null) {
                        // 获取还款短信模板
                        getLoanedDetail(this.query.id, { method: 'RepaymentMessageContent' }).then(res => {
                            const { result } = res
                            this.repaymentMessage = result
                        })
                    } else {
                        this.repaymentMessage = ''
                    }
                },
                deep: true
            }
        },
        data () {
            return {
                query: {},
                data: [],
                loading: false,
                repaid: true,
                repay_channel: {
                    type: [],
                    channel: [],
                    channel_list: {
                        BANK: [],
                        STORE: []
                    }
                },
                model: {},
                visible: false,
                repaymentMessage: '',
                repaymentErrorMessage: '',
                repaymentErrors: {
                    type: '',
                    amount: '',
                    repay_type: '',
                    repay_channel: ''
                }
            }
        },
        activated () {
            this.query = this.$route.query
        },
        created () {
            this.query = this.$route.query
        },
        methods: {
            fetch () {
                this.loading = true
                // 获取还款记录
                getLoanedDetail(this.query.id, { method: 'RepaymentRecord' }).then(res => {
                    const { result } = res
                    this.data = result.data
                    this.repaid = result.repaid
                    this.repay_channel = result.repay_channel
                }).finally(() => {
                    this.loading = false
                })
            },
            onSubmit () {
                this.loading = true
                // 先清空表单错误提示
                this.repaymentErrors = {}
                // 设置手动接管message提示
                this.$store.dispatch('MessageTake', true)
                this.repaymentErrorMessage = ''
                handleLoanedTask(this.query.id, { method: 'GenerateRepaymentCode', ...this.model }).then(res => {
                    this.visible = false
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                    setTimeout(() => {
                        this.fetch()
                    }, 500)
                }).catch(error => {
                    // 后端过来的表单错误回显
                    this.repaymentErrors = Object.assign({}, { ...this.repaymentErrors, ...error.errors })
                    // 手动处理错误
                    if (!error.errors) {
                        this.repaymentErrorMessage = error.message
                    }
                }).finally(() => {
                    this.loading = false
                })
            }
        }
    }
</script>

<style scoped>

</style>
